<template>
  <div :class="['tabs-head', layout, pageWidth]">
    <div
        :class="['tabs-container', layout, pageWidth, {'affixed' : affixed, 'fixed-header' : fixedHeader, 'collapsed' : adminLayout.collapse}]">
      <template v-for="page in pageList">
        <el-tag :key="page.fullPath" :closable="!page.unclose" :name="page.fullPath" size="middle" :type="page.fullPath === $route.fullPath ? 'primary' : 'info'" @click="onTabClick(page.fullPath)" @close="onClose(page.fullPath)">
          {{ pageName(page) }}
        </el-tag>
      </template>
    </div>
    <div v-if="affixed" class="virtual-tabs"></div>
  </div>
</template>

<script>
import {mapState, mapMutations} from 'vuex'

export default {
  name: 'TabsHead',
  props: {
    pageList: Array,
    active: String,
    fixed: Boolean
  },
  data() {
    return {
      affixed: false,
    }
  },
  inject: ['adminLayout'],
  created() {
    this.affixed = this.fixedTabs
  },
  computed: {
    ...mapState('setting', ['layout', 'pageWidth', 'fixedHeader', 'fixedTabs', 'customTitles']),
  },
  methods: {
    onTabClick(name) {
      if (this.active !== name) {
        this.$emit('change', name)
      }
    },
    onClose(key) {
      this.$emit('close', key)
    },
    onRefresh(page) {
      this.$emit('refresh', page.fullPath, page)
    },
    onContextmenu(pageKey, e) {
      this.$emit('contextmenu', pageKey, e)
    },
    pageName(page) {
      const pagePath = page.fullPath.split('?')[0]
      const custom = this.customTitles.find(item => item.path === pagePath)
      return (custom && custom.title) || page.title
    }
  }
}
</script>

<style scoped lang="scss">
.tabs-container {
  position: relative;
  font-size: 14px;
  user-select: none;
  display: flex;
  padding-top: 13px;
  padding-left: 24px;
  .title {
    line-height: 1;
  }
  .el-icon-close {
    &::before {
      transform: none;
    }
  }
  .el-tag {
    cursor: pointer;
    &+.el-tag {
      margin-left: 16px;
    }
  }
  .tab-refresh {
    color: $--color-primary-light-3;
    transition: all 0.3s ease-in-out;
    margin-right: 2px;

    &:hover {
      color: $--color-primary;
    }
    &.hide {
      display: none;
    }
  }
}

.tabs-head {
  height: 56px;
  margin: 0 auto;
  border-bottom: 1px solid #ccc;

  &.head.fixed {
    width: 1400px;
  }

  /deep/ .el-tabs--border-card {
    box-shadow: none;
    border-top: none;
  }
  /deep/ .el-tabs__item {
    padding: 0 10px !important;
  }
  /deep/.el-tabs__nav {
    display: flex;
    justify-content: flex-start;
  }
}

.tabs-container {
  margin: -16px auto 8px;
  transition: top, left 0.2s;
  .el-tag {
    &+.el-tag {
      margin-left: 10px;
    }
  }
  .header-lock {
    font-size: 18px;
    cursor: pointer;
    color: $--color-primary-light-3;

    &:hover {
      color: $--color-primary;
    }
  }

  &.affixed {
    height: auto;
    margin: 0 auto;
    top: 0px;
    position: fixed;
    z-index: 1;
    background-color: $base-bg-color;

    &.side, &.mix {
      right: 0;
      left: 240px;

      &.collapsed {
        left: 50px;
      }
    }

    &.head {
      width: inherit;
      padding: 8px 0 0;

      &.fluid {
        left: 0;
        right: 0;
        padding: 8px 24px 0;
      }
    }

    &.fixed-header {
      top: 70px;
    }
  }

  /deep/ .el-tabs__content {
    padding: 0;
  }
}

.virtual-tabs {
  height: 56px;
}
</style>